<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <style>
        .warning-row {
            background: oldlace;
        }

        .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-button type="primary" plain @click="goToChange">切换账号</el-button>
        <el-button type="primary" plain @click="goToNewPage">查看我关注的贴吧</el-button>
        <el-button type="primary" plain @click="goToSeeMyLike">我点赞过的帖子</el-button>
    </el-row>
    <h2>欢迎您</h2>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="name" label="发布人的名字" align="center"></el-table-column>
        <el-table-column prop="context" label="内容" align="center"></el-table-column>
        <el-table-column prop="likeNumber" label="点赞数" align="center"></el-table-column>
        <el-table-column prop="created_at" align="center" label="创建时间"></el-table-column>
        <el-table-column align="center" label="操作">
            <template slot-scope="scope">
                <el-row>
                    <el-button type="danger" @click="open(scope.row)">查看评论</el-button>
                    <el-button type="danger" @click="startDelete(scope.row)">删帖</el-button>
                </el-row>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页工具条 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
    </el-pagination>

    <el-dialog
            title="删帖确认框"
            :visible.sync="deleteDialogVisible"
            width="30%"
    >

        <el-form ref="updateForm" :model="post" label-width="80px">
            <el-input v-model="post.id" type="hidden"></el-input>
            <el-form-item label="我的昵称">
                <el-input disabled v-model="post.name"></el-input>
            </el-form-item>

            <el-form-item label="发布的贴吧名">
                <el-input disabled v-model="post.barName"></el-input>
            </el-form-item>
            <el-form-item label="内容">
                <el-input disabled v-model="post.context"></el-input>
            </el-form-item>
            <el-form-item label="喜欢的人数">
                <el-input disabled v-model="post.likeNumber"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="deleteMyPost">同意</el-button>
                <el-button @click="deleteDialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                deleteDialogVisible:false,
                post:{
                    name:'',
                    id:'',
                    context:'',
                    likeNumber:'',
                    created_at:'',
                    barId:'',
                    barName:''
                },

                favor:{
                    id:'',
                    userName:'',
                    postId:'',
                    barName:''
                },
                totalCount: 1,
                pageSize: 5,
                currentPage: 1,
                tableData: []
            }
        },
        mounted() {
            this.selectMyPost();
        },
        methods: {
            selectMyPost() {
                axios.get("http://localhost:8080/BarSystem/Post/selectMyPost" + location.search + "&CurrentPage=" + this.currentPage + "&PageSize=" + this.pageSize)
                    .then(resp => {
                        this.tableData.push(resp.data);
                    })
                    .catch(error => {
                        console.error('Error fetching data', error);
                    });
            },
            goToNewPage() {
                window.location.href = 'User.html'+location.search;
            },
            goToChange() {
                window.location.href = 'login.jsp';
            },
            tableRowClassName({rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection);
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.selectFocusBar();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.selectFocusBar();
            },
            open(row) {
                this.$confirm('此操作将取消您的申请, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 执行取消操作
                    // 可以添加相应的逻辑
                    // this.selectFocusBar(); // 更新数据
                }).catch(() => {
                    // 取消操作
                });
            },
            deleteMyPost() {
                var _this=this
                axios({
                    method:"post",
                    url: "http://localhost:8080/BarSystem/Post/deleteMyPost",
                    data:_this.post,
                }).then(resp => {
                    if (resp.data == "success") {
                        //录入成功，关闭窗口,并且重新查询数据
                        this.selectMyPost();
                        this.deleteDialogVisible=false;
                        this.$message({
                            message: '成功删帖',
                            type: 'success'
                        });
                    }
                })
            },

            startDelete(row) {
                // 获取改行已经有的数据，以供填入修改框
                var _this = this
                _this.post = JSON.parse(JSON.stringify(row));
                _this.deleteDialogVisible= true;
            },
        }
    });
</script>
</body>
</html>
